<template>
  <!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav> -->
  <el-container style="margin: 0;padding: 0;" v-if="$route.meta.keepAlive">
    <el-header width="90rem" height="3.75rem" style="box-shadow: 0rem 0.38rem 0.63rem 0rem rgba(78, 89, 105, 0.06);
    background-color: #fff;padding: 0;position: fixed; top: 0; left: 0; right: 0; z-index: 1000;min-width: 60rem;width: 100%">
        <!-- 导航栏 -->
        <header-nav></header-nav>
    </el-header>
    <el-container style="margin: 3.75rem 0;padding: 0;display: flex; flex-direction: row;min-width: 60rem;width: 100%">
      <el-aside width="12.5rem" style="flex: 0 0 auto;height: 100vh;position: fixed; top: 3.75rem; bottom: 0; left: 0; background-color: #fff; z-index: 999;">
        <!-- 侧边栏 -->
        <left></left>
      </el-aside>
      <!-- 主体 -->
      <el-main style="flex: 1 1 auto;background-color: #f0f0f0; height: 100%; display: flex;justify-content: center;width: 100%;min-width: 60rem;
        align-items: center;padding: 10px;margin-left: 12.5rem" >
        <div class="content-wrapper">
          <div class="fixed-bottom">
            <el-popover placement="top" :width="300" :visible="visible">
              <template #reference>
                <img src="../src/assets/img/icon/ico.png" style="width: 3rem;height:3rem;cursor: pointer" class="show" @click="show()" @mouseenter="showPopover" alt="img"/>
              </template>
              <div style="margin: 0.3rem 0.8rem 0 0.2rem;font-size: 16px">Personalized one-on-one expert guidance for monetization, plus exclusive cash rewards.</div>
              <div style="position: absolute;top:0.3rem;right: 0.4rem" @click.stop="closePopover">
                <CircleClose style="width: 1.2rem; height: 1.2rem;cursor: pointer"/>
              </div>
            </el-popover>
          </div>
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
  <!-- 登录页 -->
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</template>
<script>
import header from './components/HeaderNav.vue'
import left from './components/LeftAside.vue'
import {getUser} from './apis/user'
import {updateUrl,getUrl} from './apis/whatsapp'
import Cookies from 'js-cookie'
import {ClientJS} from "clientjs";
import {buttonClick} from "@/util/buttonClick";
export default {
  data(){
    return {
      userInfo:{
            "name": "",
            "invite_code": "",
            "email": "",
            "subscription": "",
            "expired_at": "",
            "is_active": false,
            "register_date":''
        },
      visible:true,
      url:null
    }
  },
  components:{
    headerNav:header,
    left:left
  },
  mounted() {
    this.getUserInfo();
    const client = new ClientJS();
    const fingerprint = client.getFingerprint();
    // 将 fingerprint 存储到 cookie 中
    Cookies.set('fingerprint', fingerprint, { expires: 365 }) // 有效期为365天
    // this.$nextTick(() => {
    //   this.setRem();
    // });
    // window.addEventListener("resize", this.setRem);
  },
  methods:{
    // 获取用户信息
    getUserInfo(){
      if(localStorage.getItem('token')){
        getUser().then((res)=>{
          if(res.code == 200 && res.status == 1){
            this.userInfo = res.data
            localStorage.setItem('myinfo',JSON.stringify(this.userInfo))
          }
        })
      }
    },
    async show() {
      const pagePath = window.location.href; // 当前页面 URL
      const buttonName = 'whatsapp' // 按钮名称
      buttonClick(pagePath, buttonName);
      try {
        // 更新 URL
        const updateRes = await updateUrl();
        if (updateRes.code !== 200 || updateRes.status !== 1) {
          console.error('Failed to update URL:', updateRes);
          return;
        }
        // 获取最新的 URL
        const getRes = await getUrl();
        if (getRes.code !== 200 || getRes.status !== 1) {
          console.error('Failed to get URL:', getRes);
          return;
        }
        // 设置组件内的 URL 属性
        this.url = getRes.data;
        console.log('Updated URL:', this.url);

        // 确保在获取到正确的 URL 后再打开新窗口
        window.open(this.url, '_blank');
      } catch (error) {
        console.error('Error during URL operations:', error);
      }
    },
    closePopover(){
      this.visible = false
    },
    // 显示 Popover
    showPopover(){
      this.visible = true;
    },
//     setRem() {
//       // 在标准 375px 适配下，100px = 1rem;
//       var baseFontSize = 16; //转换的尺寸

//       //设计师的尺寸
//       var baseWidth = 1920;
//       // var baseHeight = 1080;

//       //浏览器缩放比例
//       var t = window.devicePixelRatio || 1;

//       //获取当前视口宽高 （*t实际作用为解决笔记本缩放问题，获取的实际为当前设备的实际像素）

//       const clientWidth =
//           (document.documentElement.clientWidth || window.innerWidth) * t;
//       const clientHeight =
//           (document.documentElement.clientHeight || window.innerHeight) * t;
//       if (!clientWidth || !clientHeight) return;

//       //比较宽高 以更小的比例为准去适配
//       var rem = 100;

//       if (clientWidth <= baseWidth) {
//         rem = (clientWidth / 1920) * baseFontSize;
//       } else {
//         rem = (clientHeight / 1080) * baseFontSize;
//       }
//       document.querySelector("html").style.fontSize = rem + "px";
//       //解决缩放问题
//       this.$nextTick(() => {
//         let c = document.querySelector("body");
//         c.style.zoom = 1 / t;
//       });
//     },
  }
}
</script>


<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.content-wrapper {
  // max-width: 1200px; /* 设置最大宽度 */
  padding: 1rem;
  min-width: 60rem;
  //height: 1100px;
  width: 100%; /* 使宽度自适应 */
  box-sizing: border-box;
}
.fixed-bottom {
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  border-radius: 50%;
  position: fixed;
  bottom: 30px; /* 对应 el-affix 的 offset */
  right: 2.35%;
  transform: translateX(0%);
  z-index: 1000; /* 确保不会被其他元素遮挡 */
}
/* Smartphones (portrait and landscape) ----------- */
// @media only screen and (max-device-width : 600px) {
//   /* Styles */
//   html{
//     font-size: 6px;
//   }
// }

// /* Smartphones (landscape) ----------- */
// @media only screen and (min-width : 321px) and (max-width : 600px) {
//   /* Styles */
//   html{
//     font-size: 8px;
//   }
// }

// @media only screen and (min-width : 600px) {
//   /* Styles */
//   html{
//     font-size: 10px;
//   }
// }

// /* iPads (portrait and landscape) ----------- */
// @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
//   /* Styles */
//   html{
//     font-size: 12px;
//   }
// }

// /* iPads (landscape) ----------- */
// @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
//   /* Styles */
//   html{
//     font-size: 12px;
//   }
// }

// /* iPads (portrait) ----------- */
// @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
//   /* Styles */
//   html{
//     font-size: 12px;
//   }
// }

// /* Desktops and laptops ----------- */
// @media only screen and (min-width : 1024px) {
//   /* Styles */
//   html{
//     font-size: 14px;
//   }
// }

// /* Large screens ----------- */
// @media only screen and (min-width : 1224px) {
//   /* Styles */
//   html{
//     font-size: 16px;
//   }
// }

// /* iPhone 4 ----------- */
// @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
//   /* Styles */
//   html{
//     font-size: 8px;
//   }
// }

</style>
